<template>
    <div>
        <div ref="Pie" id="pie" class="pie" element-loading-text="获取数据中" element-loading-spinner="el-icon-loading"
            element-loading-background="rgba(255, 255, 255, 0.8)"></div>
    </div>
</template>
<script setup lang='ts'>

import * as echarts from 'echarts';
const props = defineProps({
    chartData: {
        type: Array<any>,
        default: false
    }
});
let myChart: any = null
const resizeDom = ref()
const resizeEle = ref()

watch(() => props.chartData, async val => {
    if (val) {
        initChart()
    }
},{ deep: true })

const { proxy } = getCurrentInstance() as ComponentInternalInstance;

const initChart = () => {
    let Pie = proxy?.$refs.Pie
    // @ts-ignore
    myChart = echarts.init(Pie);
    // 指定图表的配置项和数据
    let option = {
        grid: {
            top: "35%",
            left: "0%",
            right: "5%",
            bottom: "5%",
            containLabel: true
        },
        xAxis: [
            {
                show: false,
                data: ["1", "2", "3", "4", "5", "6", "7"]
            }
        ],
        yAxis: [
            {
                show: false,
            }
        ],
        series: [
            // 今天
            {
                name: "",
                type: "line",
                smooth: true, // 是否平滑曲线显示
                symbolSize: 0,
                lineStyle: {
                    color: "#1C60FF" // 线条颜色
                },
                data: props.chartData[0].today
            },
            // 昨天
            {
                name: "",
                type: "line",
                smooth: true, // 是否平滑曲线显示
                symbolSize: 0,
                lineStyle: {
                    color: "#BCD7FE", // 线条颜色
                    type: 'dashed' // 设置线条为虚线
                },
                data: props.chartData[0].yesterday
            }
        ]
    };
    
    option && myChart.setOption(option);
}



window.addEventListener("resize", () => {
    myChart.resize()
});

//*** 挂载Echarts
onMounted(() => {
    initChart()
    resizeDom.value = document.getElementById('pie')
    resizeEle.value = new ResizeObserver((entries) => {
        myChart.resize()
    })
    resizeEle.value.observe(resizeDom.value as HTMLElement)
})

onBeforeUnmount(() => {
    window.removeEventListener('resize', () => {
        myChart.resize()
    });
    resizeEle.value.disconnect(resizeDom.value)
})



</script>

<style scoped lang="scss">
.pie {
    width: 100%;
    height: 100%
}
</style>